<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
  </head>
  <body>
    <div id="app">
      dffdas{{message}}fds
      <div>fdafdsa{{message}}fdsafdsa</div>
    </div>
    <script>
      // 数据驱动；

      //    var vm =  new Vue({
      //         el:"#app",
      //         data:{
      //             message:"hello1"
      //         }
      //     })

      var data = {
        message: "你好",
      };

      // 获取替换操作的范围
      var ele = document.querySelector("#app");
      // 获取范围内的文本
      var childNodes = ele.childNodes;
      // console.log(childNodes)
      // 所有app下面的文本节点获取到了
      childNodes.forEach(function (child) {
        // 获取文本节点里的内容；
        // console.log(child.nodeValue)
        if (child.nodeType == 3) {
          var text = child.nodeValue;
          // fdafdasfds{{message}}fdafdsa;
          console.log(text);
          var reg = /{{(\w+)}}/g;
          if (reg.test(text)) {
            // 证明字符串里有{{}}
            var $1 = RegExp.$1;
            // console.log($1);
            child.nodeValue = text.replace(reg, data[$1]);
          }
        }
      });

      // 如果多个div 那么  内部如何解析 {{表达式}}；
    </script>
  </body>
</html>
